<template lang="html">
  <div>
    <div slot="label" class="data-auth-label fbc">
      <div>
        <span class="text">选择人员:</span>
        <el-button type="text" class="pl10" @click="addPerson">添加人员</el-button>
      </div>
      <span class="right-text">批量设置数据权限，将会对原来数据权限进行清空，重新赋予</span>
    </div>
    <div>
      <el-tag
        v-for="(item, index) in personArr"
        :key="index"
        closable
        size="medium"
        @close="handleClose(index)"
        >{{ item.userName }}</el-tag
      >
    </div>

    <!-- 添加人员弹窗 -->
    <add-person-dialog
      :dialogVisible.sync="addPersonDialogVisible"
      :currentCheckedArr="personArr"
      @success="addPersonSuccess"
    />
  </div>
</template>

<script>
import AddPersonDialog from "components/add-person-dialog";

export default {
  components: { AddPersonDialog },
  data() {
    return {
      // 添加人员弹窗开关
      addPersonDialogVisible: false,
      // 人员列表
      personArr: [],
    };
  },

  methods: {
    /**
     * 添加人员
     */
    addPerson() {
      this.addPersonDialogVisible = true;
    },
    /**
     * 设置人员列表
     */
    initPersonArr(val) {
      this.personArr = this.multipleSelectionFormat(val);
    },
    /**
     * 列表中带过来的数据格式化
     */
    multipleSelectionFormat(val) {
      return val.map((item) => {
        const { userName, id } = item;
        return { userName, id };
      });
    },
    /**
     * 添加人员成功的回调
     */
    addPersonSuccess({ checkedPersonArr }) {
      this.personArr = checkedPersonArr;
    },
    /**
     * 获取提交参数
     * 父组件调用
     */
    getUidList() {
      return this.personArr.map((item) => item.id);
    },
    /**
     * 删除
     */
    async handleClose(index) {
      await this.$myConfirm("删除本条数据");
      this.personArr.splice(index, 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.data-auth-label {
  .text,
  .right-text {
    color: #606266;
  }
}
</style>
